Node.js + blessed-contribでCUIダッシュボードを作る
はじめに
佐々木です。昨晩早く寝過ぎて朝4時に起きてしまい、仕方がないのでブログを書き始めました。
先週JAWS-UGコンテナ支部 #3に参加したのですが、AWSJ岩永さんがデモでblessed-contribを使ったCUIダッシュボードを見せてくださいました。また、先日開催された「AWSモバイル/IoTサービス徹底攻略!!〜Developers.IO Meetup番外編〜」の中で行われたIoTハンズオンでも、AWSJ吉田さんがblessed-contribを使っていました。
これ、カッコイイし、なんか流行ってるっぽいので、やってみたい!と意気込んでやってみたのがこのブログ記事になります。
やってみた
環境はMac OS X(Yosemite)です。node.jsとnpmはHomebrewでインストール済みとします。
blessed-contribのインストール
gitリポジトリをcloneし、npmでインストールします。
$ git clone https://github.com/yaronn/blessed-contrib.git $ cd blessed-contrib $ npm install -g
動かしてみる
こんなスクリプトを書いてみました。Gridで上下2画面を作成し、上部はLine Chartで過去5分間のCPUロードアベレージを、下部はRolling Logでuptimeの実行結果を表示します。
require('date-utils'); var execSync = require('child_process').execSync; var linecmd = "uptime | sed -e 's/.*average: //g' -e 's/,//g' | awk '{print $11}'"; var logcmd = "uptime"; var blessed = require('blessed') , contrib = require('blessed-contrib') , screen = blessed.screen() , grid = new contrib.grid({rows:12, cols:12, screen: screen}) , lineData = {x:[], y:[]}; // Set Grid var line = grid.set(0, 0, 6, 12, contrib.line, { style: { line: "yellow" , text: "green" , baseline: "black" } , xLabelPadding: 3 , xPadding: 5 , label: 'CPU Load Average(5min)' } ) var log = grid.set(6, 0, 6, 12, contrib.log, { fg: "green" , label: 'uptime' , height: "30%" , tags: true , border: {type: "line", fg: "cyan"} } ) // Write Line line.setData(lineData); screen.key(['escape', 'q', 'C-c'], function(ch, key) { return process.exit(0); }); setInterval(function() { var date = new Date(); lineData.y.push(execSync(linecmd)); lineData.x.push(date.toFormat("SS")); line.setData(lineData); screen.render(); }, 1000); // Write Log setInterval(function() { log.log("uptime: " + execSync(logcmd)); screen.render(); }, 1000);
動かした結果
こんな感じになります。カッコいい!
さいごに
とりあえず動かし方はわかりました。これでAWS SDKと組み合わせてカッコいいダッシュボードを作りたいです。今度チャレンジします!